<template>
<div >
    <el-container>
        <el-header>
            <!-- 头部把信息传过去 -->
            <v-header :user="user"></v-header>
        </el-header>
        <el-container>
        <el-aside width="12.5%">
            <el-menu :default-active="$route.path" router>
                <!-- 获取子路由的地址名渲染到导航 -->
                <template v-for="item in $router.options.routes[0].children">
                  <el-menu-item :index="item.path">
                <!-- 引入字体图标前缀 fa fa-... -->
                    <i class="fa" :class="item.class"></i>
                  {{item.name}}
                  </el-menu-item>
                </template>
            </el-menu>
        </el-aside>
        <el-main>
            <router-view></router-view>
        </el-main>
  </el-container>
</el-container>
</div>
</template>

<script>
    import header from './components/view/header/Header.vue'
export default{
    data(){
        return{
            user:{},
        }
    },
    created(){
        this.$http.get('/api/user').then(res=>{
            this.user=res.data.datas
        })
        },
        components:{
            'v-header':header
        }
}
</script>

<style  lang="">
body{
    background-color: #eeecec;
    font-size: 12px;
}
*{
    margin: 0;
    padding: 0;
}
    .el-container{
        margin-top: 20px;
    }
    .el-main{
        padding: 10px;
        margin-left: 12.5%;
    }
    .el-aside{
        position: fixed;
        left: 0;
        top: 80px;
    }
</style>